<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="evaluateTime" label="审核时间" min-width="150" />
    <el-table-column prop="reportId" label="报告编号" min-width="120" />
    <el-table-column prop="companyName" label="报告名" min-width="120" />
    <el-table-column prop="companyName" label="公司" min-width="120" />
    <el-table-column prop="softwareType" label="软件类型" min-width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="handleClick(row.reportId)">
          导出
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" title="导出文档" width="700">
    <template #footer>
      <div class="dialog-footer">
        <el-button class="export-button" @click="dialogVisible2 = true" >
          <span class="icon" v-html="wordIcon"></span>
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisible2" title="下载报告" width="500" center>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="load">
          下载
        </el-button>
      </div>
    </template>
    <!-- Display the report URL here -->
    <div v-if="reportUrl" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
      <p>报告下载链接</p>
      <p><a :href="reportUrl" target="_blank">{{ reportUrl }}</a></p>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ReportExportService } from '../api/export';  // 确保路径正确

const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const tableData = ref<any>([]); // 用 ref 包裹，使其在 Vue 中响应
const selectedReportId = ref<string | null>(null); // 存储选中的报告 ID
const reportUrl = ref<string | null>(null);  // 用于存储报告 URL


// 打开对话框并存储 reportId
const handleClick = (reportId: string) => {
  selectedReportId.value = reportId;
  dialogVisible.value = true;
};

const handleClick2 = (reportId: string) => {
  dialogVisible2.value = true;
};

const load = async () => {
  if (selectedReportId.value) {
    try {
      // 根据选中的报告 ID 获取报告详细信息
      reportUrl.value = tableData.value[0].reportUrl;  // 假设返回的数据结构中包含 reportUrl 属性
      console.log('报告下载链接:', reportUrl.value);
    } catch (error) {
      console.error('获取报告数据失败:', error);
    }
  }
}

// 获取所有已审核报告数据
const fetchAllAuditedReports = async () => {
  try {
    const response = await ReportExportService.getAllAuditedReports();
    tableData.value = response.data; // 解包为普通数组
    console.log('报告数据获取成功:', tableData.value);
  } catch (error) {
    console.error('获取报告数据失败:', error);
  }
};

// 在组件挂载时调用
onMounted(() => {
  fetchAllAuditedReports();
});
const wordIcon = 
`<svg t="1731994018884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5212" width="64" height="64"><path d="M980.949333 64H298.538667a42.666667 42.666667 0 0 0-42.666667 42.624v181.248l383.872 111.957333 383.829333-111.957333V106.666667a42.666667 42.666667 0 0 0-42.624-42.666667z" fill="#41A5EE" p-id="5213"></path><path d="M1023.573333 287.872H255.914667v223.914667l383.829333 111.957333 383.829333-111.957333z" fill="#2B7CD3" p-id="5214"></path><path d="M1023.573333 511.786667H255.914667v223.914666l383.829333 111.957334 383.829333-111.957334z" fill="#185ABD" p-id="5215"></path><path d="M1023.573333 735.701333H255.914667v181.290667a42.666667 42.666667 0 0 0 42.624 42.624H980.906667a42.666667 42.666667 0 0 0 42.666666-42.666667v-181.248z" fill="#103F91" p-id="5216"></path><path d="M533.12 223.914667H255.914667v607.744h277.205333a42.752 42.752 0 0 0 42.666667-42.666667V266.581333a42.752 42.752 0 0 0-42.666667-42.666666z" fill="#000000" opacity=".1" p-id="5217"></path><path d="M501.162667 255.914667H255.914667v607.744h245.205333a42.752 42.752 0 0 0 42.666667-42.666667V298.538667a42.752 42.752 0 0 0-42.666667-42.666667z" fill="#000000" opacity=".2" p-id="5218"></path><path d="M501.162667 255.914667H255.914667v543.744h245.205333a42.752 42.752 0 0 0 42.666667-42.624V298.538667a42.752 42.752 0 0 0-42.666667-42.666667z" fill="#000000" opacity=".2" p-id="5219"></path><path d="M469.162667 255.914667H255.914667v543.744h213.248a42.752 42.752 0 0 0 42.666666-42.624V298.538667a42.752 42.752 0 0 0-42.666666-42.666667z" fill="#000000" opacity=".2" p-id="5220"></path><path d="M42.666667 255.914667h426.496a42.666667 42.666667 0 0 1 42.666666 42.624v426.496a42.666667 42.666667 0 0 1-42.666666 42.666666H42.624a42.666667 42.666667 0 0 1-42.624-42.666666V298.538667a42.666667 42.666667 0 0 1 42.666667-42.666667z" fill="#185ABD" p-id="5221"></path><path d="M382.250667 671.744h-57.6L257.493333 450.986667l-70.4 220.714666H129.578667l-64-319.872h57.6l44.8 223.914667L235.093333 358.272h48l64 217.514667 44.757334-223.914667h54.357333z" fill="#FFFFFF" p-id="5222"></path></svg>`

const pdfIcon = 
`<svg t="1731994076449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9215" width="64" height="64"><path d="M160 32c-12 0-24.8 4.8-33.6 14.4S112 68 112 80v864c0 12 4.8 24.8 14.4 33.6 9.6 9.6 21.6 14.4 33.6 14.4h704c12 0 24.8-4.8 33.6-14.4 9.6-9.6 14.4-21.6 14.4-33.6V304L640 32H160z" fill="#FF5562" p-id="9216"></path><path d="M912 304H688c-12 0-24.8-4.8-33.6-14.4-9.6-8.8-14.4-21.6-14.4-33.6V32l272 272z" fill="#FFBBC0" p-id="9217"></path><path d="M696 843.2c-50.4 0-95.2-86.4-119.2-142.4-40-16.8-84-32-126.4-42.4-37.6 24.8-100.8 61.6-149.6 61.6-30.4 0-52-15.2-60-41.6-6.4-21.6-0.8-36.8 5.6-44.8 12.8-17.6 39.2-26.4 79.2-26.4 32 0 72.8 5.6 118.4 16.8 29.6-20.8 59.2-44.8 85.6-70.4-12-56-24.8-146.4 8-188 16-20 40.8-26.4 70.4-17.6 32.8 9.6 44.8 29.6 48.8 44.8 13.6 54.4-48.8 128-91.2 171.2 9.6 37.6 21.6 76.8 36.8 112.8C663.2 704 735.2 744 743.2 788c3.2 15.2-1.6 29.6-13.6 41.6-10.4 8.8-21.6 13.6-33.6 13.6z m-74.4-121.6c30.4 61.6 59.2 90.4 74.4 90.4 2.4 0 5.6-0.8 10.4-4.8 5.6-5.6 5.6-9.6 4.8-12.8-3.2-16-28.8-42.4-89.6-72.8z m-296-82.4c-39.2 0-50.4 9.6-53.6 13.6-0.8 1.6-4 5.6-0.8 16.8 2.4 9.6 8.8 19.2 29.6 19.2 25.6 0 62.4-14.4 105.6-40-31.2-6.4-58.4-9.6-80.8-9.6z m158.4-4.8c25.6 7.2 52 16 76.8 25.6-8.8-23.2-16-47.2-22.4-70.4-17.6 15.2-36 30.4-54.4 44.8zM583.2 376c-8.8 0-15.2 3.2-20.8 9.6-16.8 20.8-18.4 73.6-5.6 140.8 48.8-52 75.2-100 68.8-125.6-0.8-4-4-15.2-26.4-21.6-6.4-2.4-11.2-3.2-16-3.2z" fill="#FFFFFF" p-id="9218"></path></svg>`




</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: space-around;
}


.export-button {
  display: flex;
  flex-direction: column; /* 图标在上，文字在下 */
  align-items: center;
  background-color: transparent !important; /* 透明背景 */
  border: none !important; /* 无边框 */
  color: black !important; /* 字体颜色为黑色 */
  font-size: 16px; /* 调整字体大小 */
  width: 80px; /* 设置按钮的宽度 */
  height: 100px; /* 设置按钮的高度 */
  padding: 10px; /* 调整按钮的内边距 */
  box-shadow: none !important; /* 移除任何阴影 */
}

.icon {
  font-size: 24px; /* 调整图标的大小 */
  margin-bottom: 8px; /* 图标与文字之间的间距 */
}
</style>